<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入用户名,如:刘德华" v-model="listQuery.keyword"> </el-input>
    <el-button class="filter-item" type="primary"  icon="search" @click="handleFilter">搜索</el-button>
  </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
    <el-table-column align="center" label="编号" width="65"> <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template> </el-table-column>
    <el-table-column width="200" align="center" label="姓名"> <template scope="scope">
        <span>{{scope.row.name}}</span>
      </template> </el-table-column>
    <el-table-column width="200" align="center" label="电话"> <template scope="scope">
            <span>{{scope.row.phone}}</span>
          </template> </el-table-column>
    <el-table-column width="300" align="center" label="客户需求"> <template scope="scope">
            <span>{{scope.row.demand}}</span>
          </template> </el-table-column>
    <el-table-column width="300" align="center" label="地址"> <template scope="scope">
            <span>{{scope.row.dtladdress}}</span>
          </template> </el-table-column>      
    <el-table-column width="180" align="center" label="订单生成时间"> <template scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template> </el-table-column>    
    <el-table-column width="180" align="center" label="订单状态"> <template scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">待处理</el-tag>
          <el-tag v-if="scope.row.status !== 0 && scope.row.status !== 13" >进行中</el-tag>
          <el-tag v-if="scope.row.status == 13" type="info">已结束</el-tag>
        </template> </el-table-column>
    <el-table-column align="center" label="操作" width="150" fixed="right"> <template scope="scope">
        <el-button size="small" type="danger" @click="producingAction(scope.row)" v-if="scope.row.status == 6 || scope.row.status == 5"  >生产操作</el-button>
      </template> </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"  :total="total"> </el-pagination>
  </div>

  <el-dialog :title="'更新当前状态'" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="订单状态">
          <div>
              <el-radio-group v-model="form.status" size="small">
                <el-radio label="6" border>生产中</el-radio>
                <el-radio label="7" border>生产完成</el-radio>
              </el-radio-group>
          </div>
      </el-form-item>
      <el-form-item label="生产环节" v-if="form.status == '6'">
        <el-select class="filter-item" v-model="form.prodicingStep" placeholder="请选择">
          <el-option v-for="item in  prodicingStepList" :key="item.status" :label="item.name" :value="item.status"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel('form')">取 消</el-button>
      <el-button  type="primary" @click="orderOperate('form')" v-if="form.status == '6'">确 定</el-button>
      <el-button  type="primary" @click="updateOperate('form')" v-if="form.status == '7'">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  produceDone,
  producing,
  list,
  addOrUpdate,
  dispatchShop,
  prodicingStep
} from "@/api/order/index";
import { shopSearchForDispatch } from "@/api/shop/index";

import { mapGetters } from "vuex";
export default {
  name: "user",
  data() {
    return {
      orderState: "6",
      shopDispatchParam: {
        q: "",
        longtitude: 0.0,
        latitude: 0.0
      },
      dispatchParam: {
        demandId: undefined,
        shopId: undefined
      },
      dipatchShopDialogVisible: false,
      dispatchShopList: [],
      currentRow: null,
      province: "",
      city: "",
      area: "",
      street: "",
      form: {
        status: "0",
        dtlAddress: "",
        province: "",
        phone: "",
        name: "",
        sex: "男",
        password: "123456",
        description: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur"
          }
        ]
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        type: "1,2,3,4,5,6,7,8,9,10,11",
        pageNo: 1,
        pageSize: 20,
        keyword: undefined
      },
      sexOptions: ["男", "女"],
      dialogFormVisible: false,
      dialogStatus: "",
      userManager_btn_edit: true,
      userManager_btn_del: true,
      userManager_btn_add: true,
      textMap: {
        update: "编辑",
        create: "创建"
      },
      tableKey: 0,
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      prodicingStepList: []
    };
  },
  mounted() {},
  created() {
    this.prodicingStepAction();
    this.getList();
    this.userManager_btn_edit = true; //this.elements["userManager:btn_edit"];
    this.userManager_btn_del = true; //this.elements["userManager:btn_del"];
    this.userManager_btn_add = true; //this.elements["userManager:btn_add"];
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    prodicingStepAction() {
      prodicingStep().then(resp => {
        this.prodicingStepList = resp.data;
      });
    },
    producingAction(item) {
      this.dialogFormVisible = true;
      this.resetTemp(item.id, item.status+'',item.producingStep);
    },
    onOrderItemClick(row, event, column) {
      if (row.status == 0) {
        return;
      }
      this.$router.push({
        name: "order_item",
        query: {
          id: row.id
        }
      });
    },
    /**
     * 分配操作
     */
    dispatchClick() {
      dispatchShop(this.dispatchParam).then(resp => {
        this.dipatchShopDialogVisible = false;
        this.$notify({
          title: "成功",
          message: resp.message,
          type: "success",
          duration: 2000
        });
        this.getList();
      });
    },

    onShopDispatchSelected(val) {
      this.currentRow = val;
      this.dispatchParam.shopId = val.id;
    },

    change() {
      console.log(this.province);
    },
    handleFrom(item) {
      return item.from == 0 ? "平台录入" : "用户注册";
    },
    getList() {
      list(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getList();
    },
    onItemDispatchShop(row) {
      this.dispatchParam.demandId = row.id;
      this.shopDispatchParam.latitude = row.latitude;
      this.shopDispatchParam.longtitude = row.longtitude;
      this.shopDispatchParam.q = "";
      this.currentRow = null;
      this.dipatchShopDialogVisible = !this.dipatchShopDialogVisible;
      this.shopSearchClick();
    },
    shopSearchClick() {
      shopSearchForDispatch(this.shopDispatchParam)
        .then(resp => {
          if (resp.status == 200) {
            this.dispatchShopList = resp.data;
          } else {
            this.dispatchShopList = [];
          }
        })
        .catch(v => {
          this.dispatchShopList = [];
        });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    },
    updateOperate() {
      produceDone(this.form).then(() => {
        this.dialogFormVisible = false;
        this.getList();
        this.$notify({
          title: "成功",
          message: "生产完成",
          type: "success",
          duration: 2000
        });
      });
    },
    orderOperate(formName) {
      // producing
      producing(this.form).then(() => {
        this.dialogFormVisible = false;
        this.getList();
        this.$notify({
          title: "成功",
          message: "更新成功",
          type: "success",
          duration: 2000
        });
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form.id, this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    resetTemp(orderId,status, producingStep) {
      this.form = {
        status, status,
        id: orderId,
        prodicingStep: producingStep
      };
    }
  }
};
</script>
